<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.code" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="goVersions">
        设备纬度
      </el-button>
    </div>

    <div class="version-content">
      <div class="version-left">
        <div class="version-item">版本号</div>
        <div class="version-item" :class="{ active: activeVersion === item.Id }" v-for="(item, key) of versionList" :key="key" @click="handleVersion(item)">
          <span>版本: {{ item.Version }}</span>
        </div>
      </div>
      <div class="version-right">
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="设备编号" align="center">
            <template slot-scope="{row}">
              <span>{{ row.Code }}</span>
            </template>
          </el-table-column>
          <el-table-column label="摆放位置" width="200px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.Addr }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" width="200px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.Dt }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageCode" :limit.sync="listQuery.pageSize" @pagination="getList" />

      </div>
    </div>

  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import * as homeHttp from '@/api/home'

export default {
  name: 'ComplexTable',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '在线': 'success',
        '离线': 'info'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        pageCode: 1,
        pageSize: 10,
        code: undefined,
        versionId: undefined
      },
      versionList: [],
      activeVersion: undefined
    }
  },
  created() {
    // this.getList()
    this.getPackageVersions()
  },
  methods: {
    async getList() {
      this.listLoading = true
      const res = await homeHttp.GetAppHistoryFromDevice({
        ...this.listQuery,
        pageCode: this.listQuery.pageCode - 1
      })

      if (res.Result) {
        this.list = res.Data
        this.total = res.Total
      }

      this.listLoading = false
    },
    handleFilter() {
      this.listQuery.pageCode = 1
      this.getList()
    },
    goVersions() {
      this.$router.push({ path: '/version/history' })
    },

    async getPackageVersions() {
      const res = await homeHttp.GetAppPackageVersions()

      this.versionList = res.Data
    },

    async handleVersion(item) {
      const { Id, Version } = item
      this.activeVersion = Id
      this.listQuery.page = 1
      this.listQuery.versionId = Id
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.version-content {
  position: relative;
}

.version-left {
  // position: absolute;
  height: 100%;
  float: left;
  // min-height: 390px;
  width: 210px;
  flex-basis: 210px;
  overflow-y: auto;
}

.version-item {
  max-width: 210px;
  padding: 0 20px;
  height: 44px;
  line-height: 43px;
  box-sizing: border-box;
  overflow-x: auto;
  border: 1px solid #dfe6ec;
  border-top: 0;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.version-item:first-child {
  background-color: #304156;
  color: #fff;
  cursor: default;
}

.version-item:first-child {
  border-top: 1px solid #dfe6ec;
  line-height: 42px;
}

.version-right {
  flex-grow: 1;
  margin-left: 210px;
  padding-left: 20px;
}

.version-item.active {
  color: #409eff;
  background-color: #ecf5ff;
}

.version-item:hover {
  outline: none;
  background-color: #ecf5ff;
}
</style>
